<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>UC浏览器</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			img{
			  vertical-align: bottom;	/*取消图片三要素*/
			}
			li{
				list-style: none;/*去除无序列表前面的点*/
			}
            a{
				text-decoration:none ;
			}
			.bd{
				border: 1px solid red;
			}
			.w{
				width: 986px;
				margin: 0 auto;
			}
			.fl{
				float: left;
			}
			.fr{
				float: right;
			}
			.clearfix::before,.clearfix::after{
				content: "";
				display: table;
			}
			.clearfix::after{
				clear: both;
			}
			
			.header{
				height: 960px;
				width: 70px;
			}
			header{
				position: fixed;
				width: 100%;
				z-index: 100;
				top: 0;
				background: #ffffff;
			}
			.loge{
				padding-top: 15px;
				padding-bottom: 12px;
			}
			.navigation{
				padding-right: 20px;
				padding-top: 5px;
			}
			.navigation>li{
				margin-left:32px ;
                padding: 0 10px;
				position: relative;
			}
			.current{
				border-bottom: 3px solid #ff6403;
			}
			.navigation a{
				display: block;/*行转化*/
				font-size: 20px;
				line-height: 67px;
       
			}
			.navigation>li:hover{
				border-bottom: 3px solid green;
			}
			.subnav{
			  display: none;	
			  position: absolute;
			 /* top: 0;
			  left: 0; */
			}
			.navigation>li:hover .subnav{
				display: block;
			}
			.subnav li:hover{
				background-color: #FFFF00;
			}
			.subnav a{
				display: block;
				font-size: 16px;
				line-height: 20px;
			}
			/*main区*/
			.main{
				margin-top: 70px;
			}
			.banner{
				height: 400px;
				background:#191919 url(js/images/banner.jpg)no-repeat center 0;
			}
			.icons{
				border-bottom:1px solid red ;
				height: 145px;
			}
			.icon{
				padding-top: 58px;
				width: 138px;
				background:url(js/images/icon.png)no-repeat 49px 21px;
			}
			.icon:nth-child(2){
				background-position: -90px 21px;
			}
			.icon:hover{
				background-position: 49px -99px;
			}
			.icon:nth-child(2):hover{
				background-position: -90px -99px;
			}
			.icon:nth-child(3){
				background-position: -225px 21px;
				position: relative;
			}
			/* 下面是new图标 */
			.icon:nth-child(3)::before{
				content: "";
				width: 23px;
				height: 11px;
				background: url(js/images/icon.png) no-repeat -140px -280px;
				position: absolute;
				top: 15px;
				left: 82px;
				
			}
			.icon:nth-child(3):hover{
				background-position: -225px -99px;
			}
			.icon:nth-child(4){
				background-position: -365px 21px;
				position: relative;
			}
			/* 下面是new图标 */
			.icon:nth-child(4)::before{
				content: "";
				width: 23px;
				height: 11px;
				background: url(js/images/icon.png) no-repeat -140px -280px;
				position: absolute;
				top: 17px;
				left: 82px;
			}
			.icon:nth-child(4):hover{
				background-position: -365px -99px;
			}
			.icon:nth-child(5){
				background-position: -505px 21px;
			}
			
			.icon:nth-child(5):hover{
				background-position: -505px -99px;
			}
			.icon:nth-child(6){
				background-position: -645px 21px;
			}
		
			.icon:nth-child(6):hover{
				background-position: -645px -99px;
			}
			
			.icon a{
				display: block;
				font-size: 11px;
				line-height: 81px;
				text-align: center;
				color: #3c3e4b;
			}
			.icons .w{
				position: relative;
			}
			.twocode{
				float: left;
				background: url(js/images/twocode.png)no-repeat;
				width: 128px;
				font-size: 11px;
				line-height: 71px;
				padding-top: 106px;
				text-align: center;
				position: absolute;
                top: -32px;
				right: -4px;
			}
			.news{
				padding-bottom: 36px;
			}
			.new{
				width: 290px;
			}
			.new:nth-child(2){
				padding-left: 58px;
				padding-right: 58px;
			}
			.title{
				padding-top: 20px;
			}
			.title h4{
				line-height: 60px;
				font-size: 18px;
			}
			.title a{
				font-size: 12px;
				/* position: relative; */
				line-height: 58px;
				margin-right: 10px;
			}
			.title a::after{
				content: "";
				width: 4px;
				height: 4px;
				border: 2px solid #dedede;
				border-left-color: transparent;
				border-bottom-color: transparent;
				transform: rotate(45deg);
				position: absolute;
				top: 25px;
				left: 24px;
				
			}
			/* .title div{
				width: 6px;
				height: 6px;
				border: 2px solid red;
				border-left-color: transparent;
				border-bottom-color: transparent;
				transform: rotate(45deg);
				margin-top: 6px;
			} */
			.pic{
				background: #f2f2f2 url(js/images/activity_pic.jpg) no-repeat;
				padding-top: 120px;
		      }
			.pic a{
				font-size: 12px;
				line-height: 34px;
				display: block;
				text-align: center;
			}
			.new ul{
				padding-top: 10px;
				/* padding-bottom: 42px; */
			}
			.new ul li{}
			.new ul li a{
				line-height: 26px;
				font-size: 12px;
			}
			.new:nth-child(2) .pic{
				background: url(js/images/news_pic.jpg)no-repeat;
			}
			.new:nth-child(3) .pic{
				background: url(js/images/community_pic.jpg)no-repeat;
			}
			footer{
				background-color: #333333;
				padding-top: 51px;
				color: #b1aea9;
			}
			.jianjie{
				height: 226px;
				position: relative;
			}
					.jianjie .fl{
						width: 164px;
					}
					.jianjie .fl h4{
						font-size: 11px;
					}
					.jianjie .fl p{
						font-size: 11px;
						line-height: 19px;
					}
					.jianjie .v{
						
						position: relative;
						
					}
					.jianjie .bdr{
						width: 137px;
						border: 1px solid #453e45;
					}
					.jianjie .v h4 {
						padding-left: 30px;
					}
					.jianjie .v h4::before {
						content: "";
						font-size: 12px;
						height: 15px;
						width: 15px;
						background: url(js/images/icon.png) no-repeat 0 -293px ;
						position: absolute;
						top: 1.5px;left: 8px;
						}
						.jianjie .v h4::after{
							content: "";
							width: 15px;
							height: 15px;
							background: url(js/images/icon.png) no-repeat -28px -293px;
							position: absolute;
							top: 1.5px;
							left: 118px;
						}
					.jianjie .v a{
						font-size: 12px;
						line-height: 26px; 
						text-decoration: none;
						padding-left: 30px;	
							color:#b1aea9;
					}
					.jianjie .v>ul {
						padding-top: 12px;
						position: relative;
					}
					.jianjie .v>ul :nth-child(1) ::before{
						content: "";
						width: 9px;
						height: 16px;
						background: url(js/images/icon.png) no-repeat -5px -320px;
						position: absolute;
						top: 18px;left:12px;
						
					}
					.jianjie .v >ul :nth-child(1) :hover::before { 
					 	content: "";
					 	width: 9px;
					 	height: 16px;	
					 	background: url(js/images/icon.png) no-repeat -30px -320px;
					 	position: absolute;
					 	top: 18px;left:12px;
					 }
			    .jianjie .v>ul :nth-child(2) ::before{
			    	content: "";
			    	width: 16px;
			    	height: 12px;
			    	background: url(js/images/icon.png) no-repeat -2px -347px;
			    	position: absolute;
			    	top: 45px;left:9px;
			    	
			    }
			    .jianjie .v >ul :nth-child(2) :hover::before { 
			     	content: "";
			     	width: 16px;
			     	height: 12px;	
			     	background: url(js/images/icon.png) no-repeat -27px -347px;
			     	position: absolute;
			     	top: 45px;left:9px;
			     }
				 .jianjie .v>ul :nth-child(3) ::before{
				 	content: "";
				 	width: 16px;
				 	height: 13px;
				 	background: url(js/images/icon.png) no-repeat -2px -373px;
				 	position: absolute;
				 	top: 71px;left:9px;
				 }
				 .jianjie .v >ul :nth-child(3) :hover::before { 
				  	content: "";
				  	width: 16px;
				  	height: 13px;	
				  	background: url(js/images/icon.png) no-repeat -27px -373px;
				  	position: absolute;
				  	top: 71px;left:9px;
				  }
				  .jianjie .v>ul :nth-child(4) ::before{
				  	content: "";
				  	width: 20px;
				  	height: 16px;
				  	background: url(js/images/icon.png) no-repeat 0px -397px;
				  	position: absolute;
				  	top: 95px;left:7px;
				  	
				  }
				  .jianjie .v >ul :nth-child(4) :hover::before { 
				   	content: "";
				   	width: 20px;
				   	height: 16px;	
				   	background: url(js/images/icon.png) no-repeat -25px -397px;
				   	position: absolute;
				   	top: 95px;left:7px;
				   }
				   .jianjie .v>ul :nth-child(5) ::before{
				   	content: "";
				   	width: 17px;
				   	height: 18px;
				   	background: url(js/images/icon.png) no-repeat -1px -422px;
				   	position: absolute;
				   	top: 120px;left:8px;
				   	
				   }
				   .jianjie .v >ul :nth-child(5) :hover::before { 
				    	content: "";
				    	width: 17px;
				    	height: 18px;	
				    	background: url(js/images/icon.png) no-repeat -26px -422px;
				    	position: absolute;
				    	top: 120px;left:8px;
				    }
					.jianjie .v>ul :nth-child(6) ::before{
						content: "";
						width: 20px;
						height: 16px;
						background: url(js/images/icon.png) no-repeat -1px -449px;
						position: absolute;
						top: 147px;left:7px;
						
					}
					.jianjie .v >ul :nth-child(6) :hover::before { 
					 	content: "";
					 	width: 20px;
					 	height: 16px;	
					 	background: url(js/images/icon.png) no-repeat -26px -449px;
					 	position: absolute;
					 	top: 147px;left:7px;
					 }
					 .mid{
						  font-size: 12px;
						  position: relative;
						
					 }
					 .mid1{
						 height: 37px;		 
						 border-top:1px dotted #595959 ;
						 border-bottom:1px dotted #595959 ;			 
					 }
					 .mid1::before{
						 content: "";
						 width: 16px;
						 height: 16px;
						 background: url(js/images/icon.png)no-repeat  -100px  -280px;
						 position: absolute;
						 top: 12px;
						 left: 964px;
					 }
					 .mid1 .fl{
					     display: block;/* margin不只有横向 */
						text-decoration: none;
			            margin: 12px 0 10px 0; 
						border-right: 1px solid #546658;
						text-align: center;
					 }
					 .mid1  a{	
						color:#b1aea9;
						 font-size: 12px;
			             line-height:0px;
						padding:0 8px;
					 }
					 .mid2{
						 height: 37px;
						 border-bottom:1px dotted #595959 ;	
						 
					 }
					 .mid2::before{
						 content: "";
						 width: 16px;
						 height: 16px;
						 background: url(js/images/icon.png)no-repeat  -100px  -280px;
						 position: absolute;
						 top: 50px;
						 left: 964px;
					 }
					 .mid2 >ul .fl{
						 display: block;/* margin不只有横向 */
						 text-decoration: none;
						 margin: 12px 0 10px 0;
						 border-right: 1px solid #546658;
						 text-align: center;
					 }
			
					 .mid2 h4{
						 display: block;/* margin不只有横向 */
						 text-decoration: none;
						 margin: 12px 0 10px 0;
						 color: #595e64;
						
					 }
					 .mid2  a{
					 			color:#b1aea9;
					 			font-size: 12px;
					 			 line-height:0px;
					 			padding:0 8px;
					 }
					 .late{
						 height: 117px;
						 background: url(js/images/logo_company.png) no-repeat  0 30px,
						             url(js/images/qa_wen.png)no-repeat 630px 26px,
									 url(js/images/gs.png)no-repeat 684px 27px,
									 url(js/images/knet_cn.png)no-repeat 736px 27px,
									 url(js/images/anva.png)no-repeat 851px 26px;	 
					 }
					 .late .commpany{
						 padding-left: 132px;
						 padding-top: 24px;
						 font-size: 11px;
						 /* color: #545750; */
						 line-height: 18px;position: relative;
					 }
		</style>
	</head>
	
	<body>
		<!-- 语义化标签 -->
		<header>
			  <div class="w clearfix ">
				<div class="loge fl "><img src="js/images/uclogo.png" alt=""></div>
				<ul class="navigation fr clearfix ">
					<li class="fl current"><a href="">首页</a></li>
					<li class="fl">
						<a href="">下载</a>
						<ul class="subnav">
							<li><a href="">手机UC</a></li>
							<li><a href="">电脑浏览器</a></li>
							<li><a href="">TV浏览器</a></li>
						</ul>
					</li>
					<li class="fl"><a href="">公司</a></li>
					<li class="fl"><a href="">合作</a></li>
					<li class="fl"><a href="">社区</a></li>
					<li class="fl"><a href="">帮助</a></li>
				</ul>
			  </div>
		</header>
		<div class="main">
			<div class="banner"></div>
			<div class="icons">
				<div class="w clearfix">
				 <div class="icon fl "><a href="">Android版下载</a></div>
				 <div class="icon fl "><a href="">iPhone版下载</a></div>
				 <div class="icon fl "><a href="">电脑版下载</a></div>
				 <div class="icon fl "><a href="">Pad版下载</a></div>
				 <div class="icon fl "><a href="">TV版下载</a></div>
				 <div class="icon fl "><a href="">WP版下载</a></div>
				 <div class="twocode">手机扫一扫下载</div>
				</div>
			</div>
			<div class="news w clearfix">
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">活动专区</h4>
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">上uc.cn，下载抢100M流量礼包</a></div>
					<ul>
						<li><a href="">你没得到奖，因为你没有摇一摇</a></li>
						<li><a href="">第二季环保袋活动开放申请啦</a></li>
						<li><a href="">最壕UC微信号，天天送大奖</a></li>
						<li><a href="">UC省钱攻略大曝光：6000万红包等你来！</a></li>
						<li><a href="">手机浏览器成移动上网第一入口 UC稳居市场</a></li>
					</ul>
				</div>
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">新闻动态</h4>
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">不断寻找合伙人</a></div>
					<ul>
						<li><a href="">神马搜索与《梦想星搭档》展开娱乐内</a></li>
						<li><a href="">UC九游11月报告：《乱斗西游》成MOBA手</a></li>
						<li><a href="">UC浏览器“抢票帮”颠覆传统 亲朋好友</a></li>
						<li><a href="">UC浏览器新版造就极致视频体验</a></li>
						<li><a href="">手机浏览器使用频率仅次于即时通讯</a></li>
					</ul>
				</div>
				<div class="new fl">
					<div class="title clearfix">
						<h4 class="fl">社区热帖</h4>
						<a href="" class="fr">更多</a>
					</div>
					<div class="pic"><a href="">UC浏览器抢票帮正式发布！团结一切力量</a></div>
					<ul>
						<li><a href="">UC浏览器Android版10.0皮肤制作教程</a></li>
						<li><a href="">年底求加薪技巧！哥拼的是拍马屁的技巧</a></li>
						<li><a href="">UC浏览器抢票帮——召唤朋友一起帮你抢</a></li>
						<li><a href="">UC姐神秘面容首次曝光，多图胆小慎入</a></li>
						<li><a href="">【uc记者团】2015年春节回家 攻略</a></li>
					</ul>
				</div>
			</div>
		</div>
		<footer class="clearfix">
				<div class="jianjie clearfix w">
					<div class="fl">
						<h4>UC浏览器</h4>
						<p>产品动态</p>
						<p>功能介绍</p>
						<p>安卓浏览器</p>
						<p>iPhone浏览器</p>
						<p>电脑浏览器</p>
						<p>WP浏览器</p>
						<p>iPad浏览器</p>
						<p>aPad浏览器</p>
						<p>TV浏览器</p>
						<p>塞班浏览器</p>
					</div>
					<div class="fl">
						<h4>公司</h4>
						<p>公司首页</p>
						<p>公司概况</p>
						<p>公司动态</p>
						<p>管理团队</p>
						<p>企业文化</p>
						<p>粉丝专区</p>
						<p>荣誉之旅</p>
						<p>联系我们</p>
						<p>投资者</p>
						<p>UC闪屏</p>
					</div>
					<div class="fl">
						<h4>其它产品</h4>
						<p>UC九游</p>
						<p>PP助手</p>
						<p>神马搜索</p>
						<p> UC云</p>
						<p>U点充值</p>
						<p>用户中心</p>
						<p>体验中心</p>
						<p>帮助中心</p>
						<p>意见反馈</p>		
					</div>	
					<div class="fl">
						<h4>开放合作</h4>
						<p> 游戏开放平台</p>
						<p> 运营商合作</p>
						<p> 终端厂商合作</p>
						<p> 互联网合作</p>
						<p> 开发者中心</p>
						<p> 战略投资</p>
					</div>
					<div class="fl">
						<h4>招聘</h4>
						<p> 社会招聘</p>
						<p> 人才推荐</p>
						<p> 校园招聘</p>
						<p> 实习生招聘</p>
						<p> 内部推荐</p>
						<p> 走进UC</p>
					</div>
					<div class="fl v">
						<div class="bdr">
						<h4>中文版</h4>
						</div>
					<ul>
						<li><a href="">手机站</a></li>
						<li><a href="">Pad站</a></li>
						<li><a href="">TV站</a></li>
						<li><a href="">UC浏览器微博</a></li>
						<li><a href="">UC浏览器贴吧</a></li>
						<li><a href="">UC浏览器微信</a></li>
					</ul>
					</div>		
					</div>
			  <div class="mid w">
				  <div class="mid1 ">
					  <ul>
						  <li class="fl"><a href="">阿里巴巴集团</a></li>
						  <li class="fl"><a href="">淘宝网</a></li>
						  <li class="fl"><a href="">天猫</a></li>
						  <li class="fl"><a href="">聚划算</a></li>
						  <li class="fl"><a href="">全球速卖通</a></li>
						  <li class="fl"><a href="">阿里巴巴国际交易市场</a></li>
						  <li class="fl"><a href="">1688</a></li>
						  <li class="fl"><a href="">阿里妈妈</a></li>
						  <li class="fl"><a href="">阿里旅行·去啊</a></li>
						  <li class="fl"><a href="">阿里云计算</a></li>
						  <li class="fl"><a href="">YunOS</a></li>
						  <li class="fl"><a href="">阿里通信</a></li>
						  <li class="fl"><a href="">万网</a></li>
						  <li class="fl"><a href="">高德</a></li>
					  </ul>
				  </div>
				  <div class="mid2">
					  <h4 class="fl">友情链接: </h4>
					  <ul>
						  <li class="fl"><a href="">手机游戏</a></li>
						  <li class="fl"><a href="">网易科技</a></li>
						  <li class="fl"><a href="">dospy智能手机网</a></li>
						  <li class="fl"><a href="">历趣手机软件</a></li>
						  <li class="fl"><a href="">威锋网</a></li>
						  <li class="fl"><a href="">小说全搜</a></li>
						  <li class="fl"><a href="">IT之家</a></li>
						  <li class="fl"><a href="">前瞻网</a></li>
						  <li class="fl"><a href="">手机软件下载</a></li>
						  <li class="fl"><a href="">pc6下载</a></li>
						  <li class="fl"><a href="">KK语音</a></li>
						  <li class="fl"><a href="">安卓市场</a></li>
						  <li class="fl"><a href="">机锋网</a></li>
						
					  </ul>
				  </div>
			  </div>
			<div class="late w ">
				<div class="commpany">
			   <p>&#169;2004-2014 uc.cn 版权所有 网络文化经营许可证：文网文[2010]176号</p>
			   <p>中华人民共和国互联网药品信息服务资格证：（粤）-非经营性-2011-0120</p>
			   <p>增值电信业务经营许可证: 粤B2-20070379 粤ICP备09210879号</p>
			</div>
			</div>
			</footer>
	</body>
</html>
